import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, { getModelValue, type FormModalDto } from '@/components/modal/Modal'
import type { AnyObject } from 'ant-design-vue/es/_util/type'
import type { CollectionAccountReqDto } from '@/api/company/types'
import { exportAccountDetails } from '@/api/company'
import { message } from 'ant-design-vue'

@Component
export class DialogExport extends Render {
    @Prop() show!: boolean
    @Prop() params!: CollectionAccountReqDto

    @Emit('update:show')
    handleEmitShow(value: boolean) {
        return value
    }

    @Watch('show')
    handleWatchShow() {
        this.basicFormConfig.show = this.show
    }

    basicFormConfig = this.initBasicFormConfig() as FormModalDto
    initBasicFormConfig() {
        return {
            title: '导出',
            width: '400px',
            theme: 'light',
            show: false,
            noPadding: true,
            params: {
                confirmText: '导出'
            },
            items: {
                month: {
                    name: '选择月份',
                    element: 'rangePicker',
                    params: {
                        format: 'YYYY-MM',
                        picker: 'month'
                    },
                    required: true
                },
            },
            complete: async () => {
                const data = getModelValue(this.basicFormConfig)
                await exportAccountDetails({
                    ...this.params,
                    startMonth: data.month?.[0] ?? '',
                    endMonth: data.month?.[1] ?? ''
                })
                message.success('导出成功')
                this.basicFormConfig.show = false
                this.handleEmitShow(false)
            },
            cancel: () => {
                this.basicFormConfig.show = false
                this.handleEmitShow(false)
            },
            init: () => {
            }
        } as FormModalDto
    }


    render() {
        return <>
            {renderModal(this.basicFormConfig)}
        </>
    }
}

export default toNative<{
    params: CollectionAccountReqDto
}, {}>(DialogExport)